<template>
  <view class="">
		<view class="search-wrapper">
			<u-input class="search-input" style="padding: 0 10px;" placeholder="请输入城市名称" v-model="keywords" @input="onInput" focus auto-focus />
			<text v-if="keywords" class="icon_close" @tap="onClear"></text>
		</view>
    <view class="wrapper">
      <view class="city-list">
        <view class="" v-for="(v, i) in city" :key="i">
          <view class="module b32" :id="v.name"
            ><span class="aside"></span>{{ v.name }}</view
          >
          <view class="city1">
            <view
              :class="['city-name', 'b20']"
              @click="onClickCity(v2)"
              v-for="(v2, j) in v.list"
              :key="j"
              >{{ v2.cityName }}</view
            >
          </view>
        </view>
        <!-- 索引条 -->
        <view class="indexes">
          <view
            @click="scrollTo(item)"
            class="indexes_i"
            v-for="(item, index) in indexesLists"
            :key="index"
            >{{ item }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getCityList } from "@/api/user.js";
export default {
  data() {
    return {
			keywords: '',
      city: [],
      indexesLists: [],
    };
  },
  onLoad() {
    this.getCity();
  },
  methods: {
		onInput() {
			this.getCity()
		},
		onClear() {
			this.keywords = ''
			this.getCity()
		},
    getCity() {
      getCityList({ name: this.keywords }).then((res) => {
        if (res.code == 200) {
          const city = res.result;
          if (city && city.length > 0) {
						// 按照字母顺序进行排序
						city.sort((a, b) =>  a.initial.localeCompare(b.initial))
            let citys = [];
            let cityObj = {};
            let firstLetter = "";
            let cityList = [];
            for (var i = 0; i < city.length; i++) {
              if (i == 0) {
                cityObj.name = city[i].initial;
                cityList.push(city[i]);
                firstLetter = city[i].initial;
              } else if (firstLetter == city[i].initial) {
                cityList.push(city[i]);
              } else if (firstLetter != city[i].initial) {
                cityObj.list = cityList;
                citys.push(cityObj);
                cityObj = {};
                firstLetter = "";
                cityList = [];
                cityObj.name = city[i].initial;
                cityList.push(city[i]);
                firstLetter = city[i].initial;
              }
              if (i == city.length - 1) {
                cityObj.list = cityList;
                citys.push(cityObj);
              }
            }
						console.log(cityObj)
            this.city = citys;
            var indexes = [];
            this.city.forEach((item) => {
              item.top = 0;
              indexes.push(item.name);
            });
            this.indexesLists = indexes;

            var that = this;
            const query = uni.createSelectorQuery().in(this);

            if (that.city.length > 0) {
              setTimeout(function () {
                that.city.forEach((item) => {
                  if (item.top == 0) {
                    var newId = "#" + item.name;
                    query
                      .select(newId)
                      .boundingClientRect((data) => {
                        item.top = data.top - 26;
                      })
                      .exec();
                  }
                });
              }, 50);
            }
          } else {
            this.city = [];
          }
        }
      });
    },
    onClickCity(value) {
      let arr_s = this.city.map((e) => {
        return e.list;
      });
      let lCity = value.cityName;
      let lists = arr_s.reduce((a, b) => a.concat(b));
      for (let index = 0; index < lists.length; index++) {
        if (lists[index].cityName == lCity) {
          value = lists[index];
        }
      }
      uni.$emit('chooseCity', value)
      uni.navigateBack({
        delta: 1,
        animationDuration: 300,
      });
    },
    //索引
    scrollTo(i) {
      this.city.forEach((item) => {
        if (item.name == i) {
          uni.pageScrollTo({
            scrollTop: item.top,
            duration: 300,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
	height: 100vh;
  padding: 130rpx 40rpx 0 30rpx;
	position: relative;
	display: flex;
	flex-direction: column;
	.city-list {
		flex: 1;
	}
	
  .aside {
    content: "";
    display: inline-block;
    width: 8rpx;
    height: 8rpx;
    background-color: #145cac;
    vertical-align: middle;
    border-radius: 2rpx;
    margin-right: 16rpx;
  }

  .name-size {
    height: 40rpx;
    font-size: 28rpx;
    color: #1f2334;
    line-height: 40rpx;
  }

  .module {
    height: 40rpx;
    font-size: 28rpx;
    color: #1f2334;
    line-height: 40rpx;
  }

  .city {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 48rpx;
  }

  .city1 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 48rpx;

    .city-name:nth-child(4n),
    .city-name:nth-child(4n-1),
    .city-name:nth-child(4n-2) {
      margin-left: 20rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .city-name {
    width: 152rpx;
    height: 72rpx;
    color: #1f2334;
    background: #f3f8ff;
    border-radius: 8rpx;
    text-align: center;
    line-height: 72rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .b20 {
    margin-bottom: 20rpx;
  }

  .b32 {
    margin-bottom: 32rpx;
  }

  .location {
    height: 36rpx;
    font-size: 26rpx;
    color: #2f86f6;
    line-height: 36rpx;
    display: flex;
    align-items: center;

    image {
      width: 28rpx;
      height: 28rpx;
    }
  }

  .indexes {
    position: fixed;
    width: 40rpx;
    top: 300rpx;
    right: 0;
    margin: auto;
  }

  .indexes_i {
    margin: 18rpx 0;
    text-align: center;
    color: #b2b6c0;
    font-size: 24rpx;
  }
}
.search-wrapper {
  height: 118rpx;
  margin-bottom: 20rpx;
  position: fixed;
  top: var(--window-top);
  width: 100%;
  background-color: #ffffff;
  padding: 18rpx 40rpx 30rpx 30rpx;
  z-index: 1;
  
	.search-input {
    position: relative;
    padding: 0 24rpx;
    height: 80rpx;
    background: #f3f4f6 !important;
    border-radius: 4rpx;
	}
}
</style>
